<template>
    <div class="model-settings-container">
        <el-tabs v-model="activeTab" class="model-tabs">
            <el-tab-pane label="文本模型" name="text">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <div class="header-left">
                                <el-icon class="header-icon">
                                    <ChatLineRound />
                                </el-icon>
                                <span>文本模型设置</span>
                            </div>
                        </div>
                    </template>
                    <el-form :model="textForm" label-width="120px">
                        <el-form-item label="选择模型">
                            <el-select v-model="textForm.model" placeholder="请选择模型">
                                <el-tooltip 
                                    v-for="item in textModelOptions" 
                                    :key="item.value"
                                    :content="item.state === 0 ? '该模型已禁用' : ''" 
                                    placement="right"
                                    :disabled="item.state === 1"
                                >
                                    <el-option 
                                        :label="item.label" 
                                        :value="item.value" 
                                        :disabled="item.state === 0" 
                                    />
                                </el-tooltip>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="APP_ID">
                            <el-input v-model="textForm.appId" placeholder="请输入APP_ID" />
                        </el-form-item>
                        <el-form-item label="APP_KEY">
                            <el-input v-model="textForm.appKey" placeholder="请输入APP_KEY" show-password />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="saveTextSettings">保存设置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-tab-pane>

            <el-tab-pane label="视觉模型" name="vision">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <div class="header-left">
                                <el-icon class="header-icon">
                                    <Picture />
                                </el-icon>
                                <span>视觉模型设置</span>
                            </div>
                        </div>
                    </template>
                    <el-form :model="visionForm" label-width="120px">
                        <el-form-item label="选择模型">
                            <el-select v-model="visionForm.model" placeholder="请选择模型">
                                <el-tooltip 
                                    v-for="item in visionModelOptions" 
                                    :key="item.value"
                                    :content="item.state === 0 ? '该模型已禁用' : ''" 
                                    placement="right"
                                    :disabled="item.state === 1"
                                >
                                    <el-option 
                                        :label="item.label" 
                                        :value="item.value" 
                                        :disabled="item.state === 0" 
                                    />
                                </el-tooltip>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="APP_ID">
                            <el-input v-model="visionForm.appId" placeholder="请输入APP_ID" />
                        </el-form-item>
                        <el-form-item label="APP_KEY">
                            <el-input v-model="visionForm.appKey" placeholder="请输入APP_KEY" show-password />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="saveVisionSettings">保存设置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { ChatLineRound, Picture } from '@element-plus/icons-vue'
import request from '@/utils/request'

const activeTab = ref('text')
const textModelOptions = ref([])
const visionModelOptions = ref([])

// 文本模型表单
const textForm = reactive({
    model: '',
    appId: '',
    appKey: ''
})

// 视觉模型表单
const visionForm = reactive({
    model: '',
    appId: '',
    appKey: ''
})

// 获取模型选项
const getModelOptions = async () => {
    try {
        const res = await request({
            url: '/model/list',
            method: 'get'
        })

        // 根据type分类模型，使用name作为value
        textModelOptions.value = res.data
            .filter(model => model.type === 0)
            .map(model => ({
                label: model.name,
                value: model.name,  // 使用name作为value
                state: model.state
            }))
        
        visionModelOptions.value = res.data
            .filter(model => model.type === 1)
            .map(model => ({
                label: model.name,
                value: model.name,  // 使用name作为value
                state: model.state
            }))
    } catch (error) {
        console.error('获取模型列表失败:', error)
    }
}

// 获取设置
const getSettings = async () => {
    try {
        const [textRes, visionRes] = await Promise.all([
            request({
                url: '/model/settings/text',
                method: 'get'
            }),
            request({
                url: '/model/settings/vision',
                method: 'get'
            })
        ])

        Object.assign(textForm, textRes.data)
        Object.assign(visionForm, visionRes.data)
    } catch (error) {
        console.error('获取设置失败:', error)
    }
}

// 保存文本模型设置
const saveTextSettings = async () => {
    if (!textForm.model) {
        ElMessage.warning('请选择模型')
        return
    }
    if (!textForm.appId || !textForm.appKey) {
        ElMessage.warning('请填写完整的APP_ID和APP_KEY')
        return
    }

    try {
        await request({
            url: '/model/settings/text',
            method: 'put',
            data: textForm
        })
        ElMessage.success('保存成功')
    } catch (error) {
        console.error('保存失败:', error)
    }
}

// 保存视觉模型设置
const saveVisionSettings = async () => {
    if (!visionForm.model) {
        ElMessage.warning('请选择模型')
        return
    }
    if (!visionForm.appId || !visionForm.appKey) {
        ElMessage.warning('请填写完整的APP_ID和APP_KEY')
        return
    }

    try {
        await request({
            url: '/model/settings/vision',
            method: 'put',
            data: visionForm
        })
        ElMessage.success('保存成功')
    } catch (error) {
        console.error('保存失败:', error)
    }
}

onMounted(() => {
    getModelOptions()
    getSettings()
})
</script>

<style scoped>
.model-settings-container {
    padding: 20px;
}

.model-tabs {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
}

.header-icon {
    font-size: 18px;
    color: #409EFF;
}
</style>